<template>
  <div class="icons">
  	<swiper :options="swiperOption" v-if="showSwiper">
  		<swiper-slide v-for="(item,index) of pages" :key="item.index">
		    <div class="icon" v-for="item of item" :key="item.id">
		    	<div class="icon-img">
		    		<img class="icon-img-content" :src="item.imgUrl" />
		    	</div>
		    	<p class="icon-desc">{{item.desc}}</p>
		    </div>
       </swiper-slide>       
    </swiper>  
  </div>	
</template>
<script>
export default{
	name: 'HomeIcons',
	props:{
		list: Array
	},
	data (){
		return {
			swiperOption: {
				autoplay: false,
				loop: true
			}
		}
	},
	computed: {
	  pages () {
	    const pages= []
	    this.list.forEach((item,index)=>{
	    	const page=Math.floor(index/8);
	    	if(!pages[page]){
	    		pages[page]=[]
	    	}
	    	pages[page].push(item)
	    });
	    return pages
	  },
	  showSwiper () {
	  	return this.list.length
	  }
	}
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
@import '~@/assets/styles/mixins.styl'
  .icons
    margin-top: .1rem               
    .icons >>> .swiper-container
      height: 0
      padding-bottom: 50%
    .icon
      position: relative
      overflow: hidden
      float: left
      width: 25%
      height: 0
      padding-bottom: 25%
      
      .icon-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: .45rem
        
        box-sizing: border-box
        padding: .1rem
        .icon-img-content
          display: block
          margin: 0 auto
          height: 100%
      .icon-desc
        position:absolute
        left: 0
        right: 0
        bottom: 0
        height: .44rem
        line-height: .44rem
        text-align: center
        color: $darkTextColor
        ellipsis()    	
</style>